<template>
	<!------------------------------------ 商品列表 ------------------------------------
    @desc 包含商品管理列表，快速下单商品列表，核销商品列表
    @author kyle
    @date 2021-03-05
    @props
      productList  ———— 商品列表数据
      purchaseList ———— 供应商列表
      listType     ———— 列表类型
      sortable     ———— 是否可排序
      typeObj      ———— 采购下单搜索type
    @method
      editDetail    ———— 编辑商品
      goDetail      ———— 进入详情
      showSpec      ———— 显示规格弹窗
      updateCart    ———— 更新购物车
  -->
	<div>
		<!-- 采购下单tab -->
		<div v-if="listType === 'purchase' && showTab === true" class="mt-10 tac flex-center">
			<span class="list-item" :class="itemActiveIndex === 0 ? 'list-item-active left-active' : ''"
				@click="changeItem(0)">按商品展示</span>
			<span class="list-item" :class="itemActiveIndex === 1 ? 'list-item-active right-active' : ''"
				@click="changeItem(1)">按供应商展示</span>
		</div>
		<div v-show="!sortable">
			<!-- 商品管理页面列表 -->
			<ul v-if="listType === 'productManage'">
				<li v-for="(item, index) in productList" :key="index" class="bg-white productItem" @click="goDetail(item.ID)">
					<div class="flex">
						<img-box class="is-130 br-10 flex-s-0" :img-url="item.ThumbnailUrl410" />
						<div class="productItem-detail ml-20 flex-1">
							<p class="text-show-line-2 mb-10" :class="item.ProductStatusName === '下架' ? 'color-gray-light' : ''">
								{{ item.ProductName }}
							</p>
							<p class="flex-s-c">
								<span :class="item.ProductStatusName === '下架' ? 'color-gray-light' : ''"><span
										class="color-gray-light">库存：</span>{{ item.Stock < 0 ? 0 : item.Stock }}</span>
										<span class="fs-22 pr-10">{{ item.ProductStatusName }}</span>
							</p>
							<p class="productItem-p-left">
								<span class="color-gray-light">单价：</span><span
									:class="item.ProductStatusName === '下架' ? 'color-gray-light' : ''">￥{{ item.ProductPrice }}</span><span
									v-show="item.Unit" class="color-gray-light">/{{ item.Unit }}</span>
							</p>
							<div class="productItem-p-right bg-primary color-white lh-42 plr-25 br-21"
								@click.stop="editDetail(item.ID)">编辑</div>
						</div>
					</div>
				</li>
			</ul>

			<!-- 快速下单页面列表 -->
			<ul v-if="listType === 'quickPlaceOrder'">
				<li v-for="(item, index) in productList" :key="index" class="bg-white productItem"
					@click="goDetailPage(item, index)">
					<div class="flex">
						<img-box class="is-130 br-10 flex-s-0" :img-url="item.ThumbnailUrl410" />
						<div class="productItem-detail ml-20 flex-1">
							<p class="text-show-line-2 fs-28 fw-b">{{ item.ProductName }}</p>
							<p v-show="!item.ProductSkuAttrList && item.ProductSkuList && item.ProductSkuList[0].AttributeNameValue"
								class="color-gray-light fs-20 mt-10">
								{{ item.ProductSkuList[0].AttributeNameValue }}
							</p>
							<p v-if="(item.UnitList && item.UnitList.length > 1) || (item.ProductSkuList && item.ProductSkuList.length > 1)"
								class="color-gray-light fs-20 mt-10">
								<span v-if="switch85 == 1">
									<span
										v-if="item.UnitList && item.UnitList.length > 1 && item.BaseUnit != item.DefaultUnit && item.UnitList.length - 1 > 1">{{
											item.UnitList.length
											- 1 }}个单位 {{ (item.ProductSkuList && item.ProductSkuList.length > 1) ? '' : '可选' }}</span>
									<span v-if="item.UnitList && item.UnitList.length > 1 && item.BaseUnit == item.DefaultUnit">{{
										item.UnitList.length }}个单位
										{{ (item.ProductSkuList && item.ProductSkuList.length > 1) ? '' : '可选' }}</span>
								</span>
								<span v-else>
									<span v-if="item.UnitList && item.UnitList.length > 1">{{ item.UnitList.length }}个单位
										{{ (item.ProductSkuList && item.ProductSkuList.length > 1) ? '' : '可选' }}</span>
								</span>
								<span v-if="item.ProductSkuList && item.ProductSkuList.length > 1">{{ item.ProductSkuList.length }}个规格
									可选</span>
							</p>
							<p v-if="item.StockStr" class="color-primary fs-20 mt-10">{{ item.StockStr }}</p>
							<p v-if="item.SaleStatus != 0" class="color-primary fs-32 mt-10 fw-b left-money">{{ item.V_GradePrice
							}}<span class="color-gray-light fs-20 fw-500"> / {{ item.BaseUnit ? item.BaseUnit : item.Unit }}</span>

							</p>

							<!-- <a v-if="item.SaleStatus==1" :href="'tel:'" class="productItem-p-right tel-text">电话咨询</a> -->
							<div v-if="item.SaleStatus == 1">
								<!-- 单规格加购 -->
								<div
									v-show="item.ProductSkuAttrList && item.ProductSkuAttrList.length <= 1 && !item.UnitList && item.IsFutures !== 3"
									class="productItem-p-right flex-fe-c">
									<svg-icon v-show="item.Amount > 0" icon-class="delete-3" class="color-primary fs-42"
										:class="item.Amount <= 0 ? 'opacity-1' : ''"
										@goPage="changeAmount(item, item.Amount, item.V_StockSum, -1, item.MinNum, 1, item.oLimitBuy, item.AddNum)" />
									<div v-show="item.Amount > 0" class="btn-input-box">
										<input v-model="item.Amount" type="number" class="btn-input"
											@blur="changeAmount(item, item.Amount, item.V_StockSum, 0, item.MinNum, 1, item.oLimitBuy, item.AddNum)"
											@click.stop>
									</div>
									<svg-icon icon-class="add-1" class="color-primary fs-42"
										:class="(item.Amount >= item.V_StockSum && switch7 !== 1) || (item.Amount >= item.oLimitBuy && item.oLimitBuy > 0) ? 'opacity-1' : ''"
										@goPage="changeAmount(item, item.Amount, item.V_StockSum, 1, item.MinNum, 1, item.oLimitBuy, item.AddNum)" />
								</div>
								<!-- 服务商品单规格显示弹窗 -->
								<div
									v-show="item.ProductSkuAttrList && item.ProductSkuAttrList.length <= 1 && !item.UnitList && item.IsFutures === 3"
									class="productItem-p-right flex-fe-c">
									<svg-icon icon-class="add-1" class="color-primary fs-42" @goPage="showSpec(item, index)" />
								</div>
								<!-- 多规格加购 -->
								<div v-show="(item.ProductAttributesList && item.ProductAttributesList.length >= 1) || item.UnitList"
									class="productItem-p-right flex-fe-c">
									<svg-icon icon-class="add-1" class="color-primary fs-42" @goPage="showSpec(item, index)" />
								</div>
							</div>
						</div>
					</div>
				</li>
			</ul>

			<!-- 核销页面列表 -->
			<ul v-if="listType === 'productWriteoff'">
				<li v-for="(item, index) in productList" :key="index" class="mtb-20  br-10 ofh bg-white"
					@click="goDetail(item.ID)">
					<div>
						<div class="plr-25 pt-10 bg-fa">
							<p class="color-black lh-lg fw-500">{{ artificer ? '客户：' : '核销会员：' }}{{ item.RealName }}</p>
							<p class="color-black lh-lg fw-500">
								{{ artificer ? '服务码：' : '核销码：' }}{{ item.WriteoffCode }}{{ item.GiftId === -1 ? '【赠品】' : '' }}{{
									item.CodeType
									=== 1 ? '【总码】' : '' }}
							</p>
							<div class="flex-s-c lh-lg">
								<p class="color-gray-light fs-20">{{ artificer ? '服务时间：' : '核销时间：' }}{{ item.WriteoffTime }}</p>
								<p class="color-gray-light fs-20">订单号：{{ item.Sn }}</p>
							</div>
						</div>
						<div class="flex ptb-30 plr-25">
							<img-box class="is-130 br-10 flex-s-0" :img-url="item.ProductImage" />
							<div class="productItem-detail ml-20 flex-1">
								<p class="text-show-line-2 mb-10 color-dark">{{ item.ProductName }}</p>
								<p class="fs-20 color-gray-light">{{ item.Attribute }}</p>
								<p class="productItem-p-left color-primary">￥{{ item.WeightPrice }}</p>
							</div>
						</div>
					</div>
				</li>
			</ul>

			<!-- 采购下单 -->
			<div v-if="listType === 'purchase'">
				<!-- 按商品展示 -->
				<ul v-show="itemActiveIndex === 0">
					<li v-for="(item, index) in productList" :key="index" class="bg-white productItem"
						@click="goDetailPage(item, index)">
						<div class="flex">
							<img-box class="is-130 br-10 flex-s-0" :img-url="item.ProductImg" />
							<div class=" ml-20 flex-1">
								<p class="text-show-line-2 fs-28 fw-b">{{ item.ProductName }}</p>
								<p class="color-gray fs-20 mt-10">库存：{{ item.Stock < 0 ? 0 : item.Stock }}</p>
										<p v-if="item.MinPrice < item.MaxPrice" class="color-primary fs-32 mt-10">
											<span class="fs-24 mr--2">￥</span><span class="fw-b">{{ item.MinPrice }}</span> <span
												class="fs-24 mr--2"> ~￥</span><span class="fw-b">{{ item.MaxPrice }}</span>
										</p>
										<p v-if="item.MinPrice === item.MaxPrice" class="color-primary fs-32 mt-10">
											<span class="fs-24 mr--2">￥</span><span class="fw-b">{{ item.MinPrice }}</span>
										</p>
							</div>
						</div>
					</li>
				</ul>
				<!-- 按供应商展示 -->
				<ul v-show="itemActiveIndex === 1">
					<li v-for="(item, index) in purchaseList" :key="index" class="bg-white productItem">
						<svg-icon class="flex-v-c "
							:class="item.PurchaseProductList && item.PurchaseProductList.length > 2 ? 'right-arrow' : ''">
							<div class="flex-s-0 item-store" @click.stop="gotoSupplier(item.PurchaseMemberId)">
								<p class="text-show-line-2 fs-24 tac fw-b">{{ item.PurchaseMemberName }}</p>
								<p class="tac">
									<span class="item-store-btn">进店</span>
								</p>
							</div>
							<div class="flex-1 flex-s-c" @click.stop="gotoSupplierProduct(item.PurchaseMemberId)">
								<div v-for="(item1, ind) in item.PurchaseProductList" :key="ind" class="item-product">
									<img-box class="is-100 br-10 flex-s-0 mr-30" :img-url="item1.ProductImg" />
									<p class="fs-20">库存：{{ item1.Stock < 0 ? 0 : item1.Stock }}</p>
											<p class="fs-18 color-gray-light"><span class="fs-14 mr--2">￥</span>{{ item1.MinPrice }}起</p>
								</div>
							</div>
						</svg-icon>
					</li>
				</ul>
			</div>

			<!-- 订单详情 -->
			<ul v-if="listType === 'orderDetail'">
				<li v-for="(item, index) in productList" :key="index" class="bg-white productItem"
					@click="goDetail(item.ProductId)">
					<div class="flex">
						<img-box class="is-130 br-10 flex-s-0" :img-url="item.ProductImg" />
						<div class="productItem-detail ml-20 flex-1">
							<p class="text-show-line-2 mb-10">{{ item.ProductName }}</p>
							<p class="flex-s-c">
								<span class="color-gray-light fs-20">{{ item.Attribute }}</span>
							</p>
							<p class="productItem-p-left">
								<span class="color-primary fs-28">{{ item.Price }}<span v-show="item.RatioUnit" class="fs-24">/{{
									item.RatioUnit }}</span></span>
							</p>
							<div class="productItem-p-right lh-42 br-21">x{{ item.Amount }}{{ item.RatioUnit }}</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import imgBox from 'components/imgBox'
export default {
	name: 'ProductList',
	components: {
		imgBox
	},
	props: {
		productList: {
			type: Array,
			required: true
		},
		purchaseList: {
			type: Array,
			required: false,
			default: function () {
				return []
			}
		},
		listType: {
			type: String,
			required: true
		},
		sortable: {
			type: Boolean,
			default: false
		},
		showTab: {
			type: Boolean,
			default: false
		},
		typeObj: {
			type: Object,
			required: false,
			default: function () {
				return {}
			}
		},
		switch85: {
			type: Number,
			required: false,
			default: 0
		},
		switch7: {
			type: Number,
			required: false,
			default: 0
		},
		artificer: {
			type: Boolean,
			default: false
		},
	},
	data() {
		return {
			itemActiveIndex: 0,

		}
	},
	computed: {},
	created() {
	},
	methods: {
		// 编辑商品
		editDetail(id) {
			console.log(this.type)
			this.$emit('editDetail', id)
		},
		// 进入详情
		goDetail(id) {
			this.$emit('goDetail', id)
		},
		// 加减
		changeAmount(item, num, stock, type, minNum, UnitRatio, LimitBuy, AddNum) {
			const _oldAmount = item.Amount
			this.$utils.changeAmount(item, num, stock, type, minNum, UnitRatio, LimitBuy, this.switch7, AddNum)
			if (_oldAmount !== item.Amount || type === 0) {
				this.$emit('updateCart', item)
			}
		},
		// 显示规格弹窗
		showSpec(item, index) {
			this.$emit('showSpec', item, index)
		},
		// 进入商品详情
		goDetailPage(item, index) {
			console.log('item', item)
			this.$emit('goDetailPage', item, index)
		},
		// 切换显示效果
		changeItem(index) {
			this.itemActiveIndex = index
			this.$emit('changeItem', index)
		},
		gotoSupplier(id) {
			this.$router.push('/purchase/StoreHome/' + id)
		},
		gotoSupplierProduct(id) {
			const _obj = {
				type: this.typeObj.type,
				typePath: this.typeObj.typePath,
				purchaseMemberId: id
			}
			this.$router.push('/purchase/StoreSearchList/' + JSON.stringify(_obj))
		}
	}
}
</script>

<style lang="scss" scoped>
.list-item {
	flex: 1;
	font-size: 24px;
	line-height: 70px;
}

.list-item-active {
	background: $colorF;
	position: relative;

	&:before {
		content: '';
		position: absolute;
		width: 40px;
		height: 4px;
		bottom: 10px;
		left: calc(50% - 20px);
		@include bg-primary;
		border-radius: 2px;
	}
}

.left-active {
	border-top-right-radius: 10px;

	&:after {
		content: '';
		position: absolute;
		right: -26px;
		top: 0;
		width: 0;
		height: 0;
		border-right: 30px solid transparent;
		border-bottom: 70px solid $colorF;
	}
}

.right-active {
	border-top-left-radius: 10px;

	&:after {
		content: '';
		position: absolute;
		left: -26px;
		top: 0;
		width: 0;
		height: 0;
		border-left: 30px solid transparent;
		border-bottom: 70px solid $colorF;
	}
}

.productItem {
	padding: 32px 22px;
	position: relative;
	z-index: 1;

	&:not(:last-child) {
		margin-bottom: 2px;
	}

	.right-arrow {
		position: relative;

		&:after {
			content: '';
			position: absolute;
			top: 40px;
			right: 0;
			width: 20px;
			height: 20px;
			border: 2px solid;
			border-color: $colorC $colorC transparent transparent;
			transform: rotate(45deg);
		}
	}

	.item-store {
		width: 170px;
		margin-right: 40px;

		.item-store-btn {
			position: relative;
			margin: 20px auto 0;
			font-size: 20px;
			line-height: 34px;
			border-radius: 17px;
			padding: 0 30px 0 20px;
			@include color-primary;
			display: inline-block;
			border: 1px solid currentColor;

			&:after {
				content: '';
				position: absolute;
				top: 8px;
				right: 15px;
				width: 10px;
				height: 10px;
				border: 2px solid;
				border-color: currentColor currentColor transparent transparent;
				transform: rotate(45deg);
			}
		}
	}

	.item-product {
		margin-right: 10px;
		display: none;

		&:first-child,
		&:nth-child(2) {
			display: block;
		}
	}
}

.productItem-1 {
	padding: 0 22px;
	margin-top: 32px;
}

.sortable-chosen {
	box-shadow: 0 0 20px #ccc;
	z-index: 2;
	margin: 0 4px;
}

.left-money {
	padding-left: 16px;
	position: relative;

	&:before {
		content: '￥';
		position: absolute;
		bottom: 4px;
		font-size: 24px;
		font-weight: 500;
		left: -4px;
	}
}

.productItem-detail {
	padding-bottom: 50px;
	position: relative;

	.productItem-p-left {
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.productItem-p-right {
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.tel-text {
		color: $colorF;
		@include bg-primary;
		padding: 10px 20px;
		border-radius: 28px;
	}

	.select-box {
		display: inline-block;
		position: relative;
		padding: 0 36px 0 13px;
		line-height: 30px;
		font-size: 20px;
		border-radius: 15px;
		border: 1px solid currentColor;

		&:after {
			content: '';
			position: absolute;
			width: 10px;
			height: 10px;
			top: 5px;
			right: 10px;
			border: 1px solid;
			border-color: transparent currentColor currentColor transparent;
			transform: rotate(45deg);
		}

		.select-item-box {
			position: absolute;
			left: 0;
			color: $color3;
			width: auto;
			background: rgba(0, 0, 0, 0.1);
			z-index: 100;

			p {
				padding-left: 13px;
			}
		}
	}
}

.upDown-box {
	position: absolute;
	bottom: 32px;
	right: 22px;
	width: 110px;
	height: 40px;

	.up {
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.down {
		position: absolute;
		right: 0;
		bottom: 0;
	}
}

.btn-input-box {
	position: relative;
	margin: 0 4px;

	&:before {
		background: transparent;
	}

	.btn-input {
		position: relative;
		z-index: 1;
		height: 42px;
		width: 50px;
		line-height: 1;
		border: none;
		text-align: center;
	}
}

.bottom-popup {
	border-radius: 40px 40px 0 0;
}
</style>
